<template>
  <div class="container">
    <a-breadcrumb>
      <a-breadcrumb-item>
        <icon-home />
      </a-breadcrumb-item>
      <a-breadcrumb-item>题库</a-breadcrumb-item>
      <a-breadcrumb-item>题集管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card title="题集管理">
      <a-row>
        <a-col :flex="1">
          <a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
            label-align="left">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="题集代码">
                  <a-input v-model="formModel.collectionCode" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="题集名称">
                  <a-input v-model="formModel.collectionName" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 32px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon><icon-search /></template>搜索
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-divider style="margin-top: 0" />

      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="addNew">
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
          </a-space>
        </a-col>
        <a-col :span="12" class="btn-right-col">
        </a-col>
      </a-row>

      <a-table row-key="collectionId" :loading="loading" :pagination="pagination" :columns="columns" :data="renderData"
        :bordered="false" :scroll="scrollPercent" :scrollbar="scrollbar" :size="'medium'" @page-change="onPageChange">
        <template #enable="{ record }">
          <a-switch v-model="record.enabled" disabled />
        </template>
        <template #operations="{ record }">
          <span style="font-size: 1.3em; color: #777;">
            <icon-ordered-list @click="btnViewDetails(record)" />
            <icon-edit @click="btnEdit(record)" />
            <icon-delete @click="btnDelete(record, fetchData)" />
          </span>
        </template>
      </a-table>
    </a-card>

    <a-modal :visible="modalType > 0" modal-class="big" :footer="modalType > 1" @ok="btnEditSave(fetchData)"
      @cancel="modalType = 0">
      <template #title>
        题集详情 <div v-if="currRecord.collectionId">&nbsp;#{{ currRecord.collectionId }}</div>
      </template>
      <a-form :model="currRecord" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="right"
        :disabled="modalType == 1">
        <a-form-item label="考试" required>
          <a-select v-model="currRecord.examId" :options="examOptions" />
        </a-form-item> 

        <a-form-item label="题集代码" required>
          <a-input v-model="currRecord.collectionCode" />
        </a-form-item>
        <a-form-item label="题集名称" required>
          <a-input v-model="currRecord.collectionName" />
        </a-form-item>
        <a-form-item label="题集分类" required>
           <a-select v-model="currRecord.collectionCategoryId" :options="collectionCategoryIds" />
        </a-form-item>
        <a-form-item label="题目数量">
          <a-input-number mode="button" v-model="currRecord.problemQuantity" :default-value="0" :min="0" :max="100"
            :precision="0" />
        </a-form-item>
        <a-form-item label="总分数">
          <a-input-number mode="button" v-model="currRecord.totalScore" :default-value="0" :min="0" :max="200"
            :precision="0" />
        </a-form-item>    
        <a-form-item label="总时限(分钟)">
          <a-input-number mode="button" v-model="currRecord.totalTimeLimit" :default-value="0" :min="0" :max="240"
            :precision="0" />
        </a-form-item>    
        <a-form-item label="是否真题">
          <a-switch v-model="currRecord.trueProblem" />
        </a-form-item>
        
        <a-form-item label="题目来源">
          <a-input v-model="currRecord.collectionSource" />
        </a-form-item>
        <!-- <a-form-item label="题集摘要">
          <a-input v-model="currRecord.remark" />
        </a-form-item> -->
        
        <a-form-item label="备注">
          <a-textarea v-model="currRecord.remark" />
        </a-form-item>
        <a-form-item label="是否可用">
          <a-switch v-model="currRecord.enabled" />
        </a-form-item>
      </a-form>
    </a-modal>

  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { formatTime, getPostData } from '@/utils';
import useLoading from '@/hooks/loading';
import type { TableColumnData, TableData } from '@arco-design/web-vue/es/table/interface';
import { getList } from '@/api/problems/collections';
import { getExamOptions} from '@/api/lms/exams';
import { formModel, pagination, columns } from './const';
import { modalType, currRecord, addNew, btnEdit, btnDelete, btnEditSave } from './event';
import { getAppOptions } from '@/api/base';

const router = useRouter();

const scrollbar = ref(true);
const scroll = {
  x: 2000,
  y: 200
};
const scrollPercent = {
  x: '100%',
  y: '100%'
};

let collectionCategoryIds = getAppOptions('ITEM_CATEGORY');
let examOptions = getExamOptions(); 


const { loading, setLoading } = useLoading(true);

const renderData = ref<TableData[]>();

const search = () => {
  pagination.current = 1;
  fetchData();
};

const onPageChange = (current: number) => {
  pagination.current = current;
  fetchData();
};

const fetchData = async () => {
  let pdata = getPostData(pagination, formModel.value, 'collectionId');
  setLoading(true);
  const data = await getList(pdata);
  pagination.total = data.totalCount;
  renderData.value = data.items;
  setLoading(false);
};

async function btnViewDetails(record:any) {
  console.log("router: ", router);
  router.push({
      name: 'CollectionDetails',
      query: {
        id: record.collectionId
      },
    });
}

fetchData();
</script>
